<template>
    <div class="news-details">
        <h3 class="title">新闻标题</h3>
        <p>
            <span class="left">发表时间：</span>
            <span class="right">热点关注：</span>
        </p>
        <hr>
        <div class="content" v-html="msg">
           

            
        </div>
        <comment></comment>
    </div>

</template>

<script>
    /*
    * 点击列表 如何和子页面联系起来的：是通过路由传参的方式　解决的，
    */ 


   //导入新闻子组件
    import Comment from '../comment/Comment.vue'


    export default {
        data(){
            return {
                id: this.$route.params.id,
                msg: `<p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>
                <p class="para">this is some data that is the part of content.It shows that current news around the world!</p>`
                
            }
        },
        components: {
            'comment': Comment
        }
    }

</script>

<style lang="scss" scoped>
.news-details {
    background: #fff;
    padding: 0 15px;
    overflow: hidden;

    .title {
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
    }

    p {
        overflow: hidden;

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    }
}

</style>
